import type { FC, PropsWithChildren } from 'react'
import { getRgb, initvalue } from '../../../common/utils'
import { context } from '../../../common/context'

const Title: FC<PropsWithChildren<any>> = ({ children, name, header, ...props }) => {
  const { resume: { content, customization }, fontScale } = context

  const { applyAccentColor, colors, title, spacing } = customization
  const { module } = spacing
  const { marginHorizontal } = module || {}
  const { fontSize } = spacing
  const item = name ? content[name] : null
  const { titleBkg, style } = title || {}
  const styles: any = {
    fontWeight: 'bold',
    fontSize: `${((fontSize || 0) * 0.5 + initvalue.fontSize) * fontScale + 1}pt`,
    padding: `0 ${(marginHorizontal || 0)}mm  0 `

  }

  if (!header) {
    if (style === 'box') {
      styles.textAlign = 'center'
    }
    if (style === 'boxleft') {
      styles.textAlign = 'left'
    }
  }
  else {
    styles.padding = 0
  }
  if (applyAccentColor?.includes('headings')) {
    styles.color = getRgb(colors.strong.accentColor)
  }
  if (titleBkg) {
    styles.background = getRgb(titleBkg)
  }
  return <td style={{ padding: 0, ...styles }} {...props}>
    {
      children || item?.displayName || null
    }
  </td>
}
export default Title
